.CssCard {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  padding: 20px;
  height: 100px;
  width: 200px;
  position: relative;
  margin-right: 20px;
  margin-bottom: 20px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  &-main {
    padding: 30px 20px;
    &__content {
      position: relative;
      z-index: 2;
      font-size: 15px;
      line-height: 24px;
      text-indent: 2em;
    }
  }
  &.style1 {
    background: linear-gradient(-45deg, transparent 15px, #58a 0);
  }
  &.style2 {
    background: linear-gradient(135deg, transparent 15px, #58a 0) top left,
      linear-gradient(-135deg, transparent 15px, #58a 0) top right,
      linear-gradient(-45deg, transparent 15px, #58a 0) bottom right,
      linear-gradient(45deg, transparent 15px, #58a 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
  }
  &.style3 {
    background: radial-gradient(circle at top left, transparent 15px, #58a 0)
        top left,
      radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
      radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom
        right,
      radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom
        left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
  }
  &.style4 {
    background: linear-gradient(-150deg, transparent 20px, #58a 0%);
    border-radius: 5px;
    .CssCard-main__bg {
      position: absolute;
      right: 0;
      top: 0;
      width: 24px;
      height: 40px;
      background: linear-gradient(
        to left bottom,
        transparent 50%,
        rgba(0, 0, 0, 0.2) 0,
        rgba(0, 0, 0, 0.4)
      );
      transform-origin: bottom right;
      transform: translateY(-18px) rotate(-30deg);
      border-bottom-left-radius: inherit;
      box-shadow: -0.2em 0.2em 0.3em -0.1em rgba(0, 0, 0, 15%);
      border-radius: 5px;
    }
  }
  &.style5 {
    background: radial-gradient(
      ellipse at center,
      rgba(0, 0, 0, 00) 0%,
      rgba(0, 0, 0, 00) 26%,
      rgba(0, 0, 0, 0) 37%,
      rgba(0, 0, 0, 0) 47%,
      rgba(0, 0, 0, 0) 58%,
      rgba(0, 0, 0, 0) 60%,
      rgba(0, 0, 0, 0) 70.25%,
      rgba(85, 136, 170, 1) 71%,
      #58a 100%
    );
  }
  &.style6 {
    background: radial-gradient(
      ellipse at top left,
      rgba(0, 0, 0, 00) 0%,
      rgba(0, 0, 0, 0) 70.1%,
      #58a 71%,
      #58a 100%
    );
  }
  &.style7 {
    background: radial-gradient(
      ellipse at top left,
      rgba(0, 0, 0, 00) 0%,
      rgba(0, 0, 0, 0) 20.1%,
      #58a 58%,
      #58a 100%
    );
  }
  &.style8 {
    overflow: hidden;
    .CssCard-main__bg {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 48% 5%;
      border: 100px solid #58a;
      height: 100%;
      width: 100%;
      background-color: transparent;
    }
  }
  &.style9 {
    width: 400px;
    height: 500px;
    .CssCard-main__bg {
      position: absolute;
      left: 20px;
      right: 20px;
      top: 20px;
      bottom: 20px;
      background: rgba(255, 255, 255, 0.55);
      -webkit-mask: radial-gradient(
          circle at 100% 40px,
          transparent 6px,
          #fff 6px
        ),
        radial-gradient(circle at 0% 40px, transparent 6px, #fff 6px);
      -webkit-mask-composite: source-in;
    }
  }
  &.style10 {
    width: 400px;
    height: 500px;
    .CssCard-main__bg {
      position: absolute;
      left: 20px;
      right: 20px;
      top: 20px;
      bottom: 20px;
      background-repeat: no-repeat;
      background-image: radial-gradient(
          circle at 0% 40px,
          transparent 6px,
          rgba(255, 255, 255, 0.55) 6px
        ),
        radial-gradient(
          circle at 100% 40px,
          transparent 6px,
          rgba(255, 255, 255, 0.55) 6px
        );
      background-size: 50% 100%;
      background-position: top left, top right;
    }
  }
  @media screen and (max-width: 768px) {
    width: 100% !important;
    height: auto !important;
  }
}
